@import '../../../../src/index.scss';

.header {
  box-shadow: inset 0 -1px 0 0 $l-neutral-30;
}

.text-brand {
  @include text-xs;
}
.text-xs-bolder {
  @include text-xs;
}
.hide {
  visibility: hidden !important;
}
.mt-0-64 {
  margin-top: 5px;
}
input[type='radio'] {
  width: 10px !important;
  height: 10px !important;
}
.h-19r {
  height: 18.5rem;
}

/*
body::-webkit-scrollbar {
  width: 4px;               // width of the entire scrollbar
}

body::-webkit-scrollbar-track {
  background: white;        // color of the tracking area
}

body::-webkit-scrollbar-thumb {
  background-color: #1D4ED8;    // color of the scroll thumb
  border-radius: 20px;       // roundness of the scroll thumb
  // border: 3px solid orange;  // creates padding around scroll thumb
}

* {
  scrollbar-width: thin;
  scrollbar-color: #1D4ED8 white;
  user-select: none;
}

// Works on Chrome, Edge, and Safari
*::-webkit-scrollbar {
  width: 6px;
}

*::-webkit-scrollbar-track {
  background: white;
}

*::-webkit-scrollbar-thumb {
  background-color: white;
  border-radius: 20px;
  // border: 3px solid orange;
}
*/

/* The container */
.radioContainer {
  display: block;
  position: relative;
  padding-left: 15px;
  cursor: pointer;
  user-select: none;
}

/* Hide the browser's default radio button */
.radioContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 3px;
  left: 0;
  height: 10px;
  width: 10px;
  border-width: 1px;
  border-color: $gray-60;
  background-color: white;
  border-radius: 50%;
}

.smallCheckmark {
  position: absolute;
  top: 5px;
  left: 2px;
  height: 6px;
  width: 6px;
  background-color: white;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radioContainer:hover input ~ .checkmark {
  background-color: $gray-10;
}

/* When the radio button is checked, add a blue background */
.radioContainer input:checked ~ .checkmark {
  background-color: white;
}
.radioContainer input:checked ~ .smallCheckmark {
  background-color: $blue-50;
}

/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked ~ .checkmark:after {
  display: block;
}
.radioContainer input:checked ~ .smallCheckmark:after {
  display: block;
  background-color: $blue-50;
}

/* Style the indicator (dot/circle) */
.radioContainer .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

.enter {
  transform: translateY(100%);
}
.enter-to {
  transform: translateY(0);
}
.slide-enter-active {
  position: absolute;
}

.leave {
  transform: translateY(0);
}
.leave-to {
  transform: translateY(130%);
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.25s ease-in-out;
}

// Custom checkbox
.checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.checkbox > input {
  height: $spacing-7;
  width: $spacing-7;
  appearance: none;
  border: 2px solid $neutral-500;
  border-radius: $spacing-1;
  outline: none;
  background-color: white;
  cursor: pointer;
}

.checkbox > input:checked {
  border-color: $blue-60;
  background-color: $blue-60;
}

.checkbox > input:checked + span::before {
  content: '\2713';
  display: block;
  text-align: center;
  color: $white;
  position: absolute;
  left: 11px;
  top: 10px;
  @include text-sm;
}

// v-tooltip styling
.tooltip {
  display: block !important;
  z-index: 10000;
  @include text-xs;
  pointer-events: none;

  .tooltip-inner {
    background: $cool-gray-90;
    color: $cool-gray-10;
    border-radius: $spacing-1;
    border: 1px solid $cool-gray-70;
    padding: 4px 10px;
  }

  .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
    border-color: $cool-gray-90;
    z-index: 1;

    &::before {
      content: '';
      position: absolute;
      top: -1px;
      left: 0;
      width: 9px;
      height: 9px;
      transform-origin: top left;
      transform: rotateZ(45deg);
      border-left: 1px solid $cool-gray-70;
      border-top: 1px solid $cool-gray-70;
      background: $cool-gray-90;
      border-bottom-right-radius: 100%;
    }
  }

  &[x-placement^='top'] {
    margin-bottom: 5px;

    .tooltip-arrow {
      border-width: 5px 5px 0 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      bottom: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^='bottom'] {
    margin-top: 5px;

    .tooltip-arrow {
      border-width: 0 5px 5px 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      top: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^='right'] {
    margin-left: 5px;

    .tooltip-arrow {
      border-width: 5px 5px 5px 0;
      border-left-color: transparent !important;
      border-top-color: transparent !important;
      border-bottom-color: transparent !important;
      left: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[x-placement^='left'] {
    margin-right: 5px;

    .tooltip-arrow {
      border-width: 5px 0 5px 5px;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      right: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s, visibility 0.15s;
  }

  &[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.15s, visibility 0.15s;
  }
}

.headerModal {
  position: fixed;
  top: 64px;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 64px);
  overflow: auto;
  background: $white;
  padding: $spacing-11;
  z-index: 10;
}

.title {
  color: $neutral-900;
  margin-top: $spacing-7;
  // @include text-xl;
  @include text-lg;
  &:first-child {
    margin-top: 0;
  }
}
.subtitle {
  color: $m-neutral-80;
  @include text-sm;
}

.subgroup {
  color: $neutral-500;
  padding: $spacing-3;

  &.note {
    background: $l-neutral-20;
    border-radius: $spacing-3;
    padding: $spacing-8 $spacing-10;

    &.dev {
      background: $orange-10;
      color: $orange-60;

      .title {
        color: $orange-80;
        @include text-xl;
      }
    }
  }
}
